<template>
    <div class="tr">
        <div class="tr-top">
            <div class="left">
                <div class="itm"><el-button :disabled="!permissionData.data['rolepermissionlist-post']" @click="saveEv">保存</el-button></div>
                <!-- <div class="itm"><el-button  @click="getEv">保存</el-button></div> -->
                <div class="itm"><el-input v-model="filterText" style="width: 240px" placeholder="关键字过滤" /></div>
            </div>
            <div class="right">

            </div>
        </div>
        <el-scrollbar class="tr-content">
            <el-tree ref="treeRef" :default-expanded-keys="defaultExpandedKeys" :filter-node-method="filterNode" :data="data" show-checkbox
                node-key="code" :default-checked-keys="checkedKeys" :props="defaultProps" />
        </el-scrollbar>
    </div>
</template>

<script setup>
import { ref, onMounted, onActivated, watch } from 'vue'
import { RolePermissionListGet, RolePermissionListPost } from '@/api/setting/role/index.js'
import { loadingStore } from '@/stores/index.js'
import { permissionStore } from '@/stores/index.js'

// 权限数据
const permissionData = permissionStore()

const loading = loadingStore()

const defaultProps = {
    children: 'children',
    label: 'label',
}
const data = ref([])
const treeRef = ref()
const checkedKeys = ref([])
const defaultExpandedKeys = ref([])
const filterText = ref('')

onMounted(() => {

});
onActivated(() => {
    getEv()
})
const getEv = async () => {
    let params = {}
    loading.loading = true
    params['role_id'] = sessionStorage.getItem("roleIdPermission")
    try {
        let arr_data = await RolePermissionListGet(params)
        if (arr_data.status != 200) {
            return
        }
        data.value = arr_data.data.result.data
        checkedKeys.value = arr_data.data.result.checkedKeys
        defaultExpandedKeys.value = arr_data.data.result.defaultExpandedKeys
    } catch (error) {
        ElMessage.error('查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

const saveEv = async () => {
    console.log(checkedKeys.value)
    console.log(treeRef.value.getCheckedKeys(false))
    let CheckedList = treeRef.value.getCheckedKeys(false)
    if (CheckedList.length==0) {
        ElMessage.error('请选选择数据')
        return
    }
    loading.loading = true
    try {
        let arr_data = await RolePermissionListPost({ role_id: sessionStorage.getItem("roleIdPermission"), checkedKeys: CheckedList })
        if (arr_data.status != 200) {
            return
        }
        await getEv()
    } catch (error) {
        console.log(error)
        ElMessage.error('获取单个数据接口请求失败' + error)
    } finally {
        loading.loading = false
    }

}

watch(filterText, (val) => {
    treeRef.value.filter(val)
})
const filterNode = (value, data) => {
    if (!value) return true
    return data.label.includes(value)
}
</script>

<style lang='less' scoped>
.tr {
    height: 100%;
}

.tr-top {
    height: var(--tr-top-height);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right {
        display: flex;
        align-items: center;
    }

    .left {
        display: flex;
        align-items: center;
    }

    .itm {
        padding-right: 4px;
        box-sizing: border-box;
    }
}

.tr-content {
    height: calc(100% - var(--tr-top-height));
    // overflow: scroll;
}
</style>